<template>
  <van-skeleton title :row="15" :loading="isload">
    <div class="hello">
      <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow />
      <van-button type="primary" @click="onClick">主要按钮</van-button>
      <van-picker show-toolbar title="标题1" :columns="columns" @confirm="onConfirm" @cancel="onCancel"
        @change="onChange" />
    </div>
  </van-skeleton>

</template>

<script>
import { NavBar, Button, Toast, Picker, Skeleton } from 'vant'

import { getDemo } from '../util/http'

export default {
  name: 'HelloWorld',
  props: {

  },
  created() {
    getDemo().then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    setTimeout(() => {
      this.isload = false;
    }, 1000);
  },
  data() {
    return {
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      isload: true
    };
  },
  components: {
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [NavBar.name]: NavBar,
    [Skeleton.name]: Skeleton
  },
  methods: {
    onClick() {
      Toast('提示内容');
    },
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast('取消');
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
